<template>
	<view class="message-container">
		<u-navbar bgColor="#000000" autoBack height="90" placeholder fixed>
			<view class="u-nav-slot" slot="center">
				<!-- 正文内容 -->
				<text>消息通知</text>
			</view>
		</u-navbar>
		<!-- 导航 -->
		<view class="message-nav">
			<u-tabs :list="list1" lineColor="#000000" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle">
			</u-tabs>
		</view>
		<view class="message-content">
			<u-empty v-show="messageList.length===0" mode="message" icon="../../static/imgs/empty-message.png"
				iconSize="20">
			</u-empty>
			<navigator class="message-item" url="./letter">
				<view class="item-left">
					<image src="../../static/imgs/user-avtar.png" mode=""></image>
				</view>
				<view class="item-right">
					<view class="right-hd">
						<text class="user-name">爱健身的兔子</text>
						<text class="time">2022.7.8</text>
					</view>
					<view class="right-desc">
						谢谢您的关注，欢迎咨询减脂问题，一起努力
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [{
					img: "../../static/imgs/user-avtar.png"
				}],
				list1: [{
					name: '私信',
				}, {
					name: '互动',
				}, {
					name: '通知'
				}],
				activeStyle: {
					color: "#ffffff",
					fontSize: "30rpx",
					fontWeight: "bold"
				},
				inactiveStyle: {
					color: "#ffffff",
					fontSize: "30rpx",
					fontWeight: "bold"
				}

			};
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.message-container {
		height: 100%;
		overflow-y: auto;
		background-color: #000000;
		padding: 0 72rpx;

		.u-nav-slot {
			font-size: 40rpx;
			font-weight: bold;
		}

		.message-nav {
			width: 100%;
			border-bottom: 1px solid #4B4B4B;
		}

		.message-content {
			.message-item {
				display: flex;
				margin: 40rpx 0;
				.item-left {
					width: 100rpx;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.item-right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.right-hd {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.right-desc {
						width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
